<template>
	<view class="container">
		<view>
			<text>input type</text>
			<scroll-view scroll-y="true">
				<input focus placeholder="focus自动获得焦点" />
				<input placeholder-style="color:#F76260" placeholder="placeholder-style占位符字体是红色的" />
				<input confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
				<input maxlength="10" placeholder="最大输入长度为10" />

				<text>当前输入：{{keyInput}}</text>
				<input @input="onKeyInput" placeholder="@input输入同步到view中" />
				<input type="number" placeholder="number这是一个数字输入框" />
				<input type="digit" placeholder="digit带小数点的数字键盘" />
				<input type="idcard" placeholder="idcard身份证输入键盘" />
				<input password type="text" placeholder="password这是一个密码输入框" />
				<input placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
				<text v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
				<input placeholder="请输入密码" :password="showPassword" />
				<text :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword">&#xe568;</text>
			</scroll-view>
		</view>

		<view>
			<text>input confirm-type</text>
			<scroll-view scroll-y="true">
				<input confirm-type="next" placeholder="右下角按钮为“下一个”" />
				<input confirm-type="go" placeholder="右下角按钮为“前往”" />
				<input confirm-type="done" placeholder="右下角按钮为“完成”" />
				<input confirm-type="send" placeholder="右下角按钮为“发送”" />
				<input confirm-type="search" placeholder="右下角按钮为“搜索" />
			</scroll-view>
		</view>


		<view>
			<text>input inputmode </text>
			<scroll-view scroll-y="true">
				<input inputmode="email" placeholder="为邮件地址输入优化的虚拟键盘" />
				<input inputmode="tel" placeholder="电话输入键盘，包含 0 到 9 的数字" />
				<input inputmode="numeric" placeholder="数字输入键盘，所需要的就是 0 到 9 的数字" />
				<input inputmode="search" placeholder="为搜索输入优化的虚拟键盘" />
				<input inputmode="none" placeholder="无虚拟键盘" />
			</scroll-view>
		</view>


		<view>
			<text>uni-easyinput 增强输入框</text>
			<scroll-view scroll-y="true">
				<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>
				<uni-easyinput type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
				<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
				<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
				<uni-easyinput prefixIcon="compose" v-model="value" placeholder="左侧图标" @iconClick="iconClick">
				</uni-easyinput>
			</scroll-view>
		</view>


	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const showPassword = ref(true)
	const showClearIcon = ref(false)
	const inputClearValue = ref()

	const keyInput = ref()

	const onKeyInput = (val) => {
		console.log(val);
		keyInput.value = val.detail.value
	}

	const clearInput = (event) => {
		inputClearValue.value = event.detail.value;
		if (event.detail.value.length > 0) {
			showClearIcon.value = true;
		} else {
			showClearIcon.value = false;
		}
	}

	const clearIcon = () => {
		inputClearValue.value = '';
		showClearIcon.value = false;
	}

	const changePassword = () => {
		showPassword.value = !showPassword.value
	}
</script>

<style lang="scss">
	.container {
		input {
			border: 1px solid black;
			margin-bottom: 15px;
		}

		scroll-view {
			height: 500rpx;
			margin-bottom: 200rpx;
		}

		.uni-easyinput {
			margin-bottom: 10rpx;
		}
	}
	
	
</style>